<template>
	<view class="Search_page">
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="fengmian">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<view class="Search">
					<uni-section>
						<uni-search-bar bgColor="#dddddd" class="uni-mt-10" radius="23" placeholder="请输入关键字"
							clearButton="auto" cancelButton="none" @confirm="search" @input="input" />
					</uni-section>
				</view>

				<view class="search_boxOne" v-if="isInput">
					<ul class="xiala_Box" v-for="(list,count) in listdata">
						<li><text>{{list.title}}</text></li>
					</ul>

				</view>

				<view class="hotSearch_Box" v-else>
					<view class="TagTitle"><text>热门搜索</text></view>
					<view class="search_Box">
						<view class="car_Box" v-for="(item,index) in imgList" :key=index @click="toread()">
							<view class="count"><text>{{index+1}}</text></view>
							<view class="hotPic"><img :src="item" alt=""></view>
							<view class="title_name"><text>我为邪帝</text></view>
						</view>
					</view>
					<view class="app_name">
						<text>--&nbsp; 极慢观&nbsp; --</text>
					</view>
				</view>
			</view>
		</unicloud-db>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				imgList: [
					'static/fengmain/dszsj.jpg',
					'static/fengmain/dwrm.jpg',
					'static/fengmain/mohuangdaguanjia.jpg',
					'static/fengmain/wlziyx.jpg',
					'static/fengmain/yrzx.jpg',
					'static/fengmain/dwrm.jpg',
					'static/fengmain/wlziyx.jpg',
					'static/fengmain/dwrm.jpg',
					'static/fengmain/dwrm.jpg',
					'static/fengmain/dwrm.jpg',
				],
				listdata: [], //搜索数组
				resData:[],
				isInput: false,
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			//获取数据库数据
			getData(){
				uniCloud.callFunction({
					name:"getCardeckData"
				}).then(res=>{
					console.log(res);
					this.resData=res.result.data;
				})
				
			},
			
			//跳转阅读
			toread() {
				uni.navigateTo({
					url: '/pages/read/read'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res);
				this.isInput = !this.isInput;
				//如果输入为空则直接返回原始数据
				if (res== "") {
					this.listdata = this.resData;
					return this.listdata;

				} else {
					this.listdata = this.resData.filter(item => (
						-~item.title.indexOf(res)
					))

				}

			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {

				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss">
	// serch_box结果
	.search_boxOne {
		width: 100%;
		background-color: #fcfcfc;
	}

	.search_boxOne ul {
		width: 100%;
		padding-left: 25px;
		list-style-type: none;

	}

	.search_boxOne ul li {
		width: 100%;
		height: 30px;
		line-height: 30px;
	}

	.search_boxOne ul li:active {
		background-color: #f5f5f5;

	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;

	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		width: 100%;
	}

	// 搜索页面
	.Search_page {
		width: 100%;
		height: 667px;
		max-height: 800px;


	}

	.hotSearch_Box {
		width: 90%;

		margin: auto;
	}

	//热门搜索
	.TagTitle {
		font-weight: 900;
		margin-bottom: 18px;
	}

	//排行盒子
	.search_Box {
		width: 100%;
		height: 500px;
	}

	//单个盒子
	.car_Box {
		width: 50%;
		float: left;
		display: flex;
		margin-bottom: 13px;

	}

	//数字
	.count {
		width: 18px;
		margin: 6px;

	}

	// 漫画名字
	.title_name {
		margin-left: 7px;
		margin-top: 15px;
	}

	//图片
	.hotPic {
		width: 70px;
		height: 85px;
	}

	.hotPic img {
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.app_name {
		width: 100%;
		color: #a7a7a7;
		text-align: center;
	}
</style>